import { useEffect, useState } from "react"
import { Line } from '@ant-design/plots';
import Card from "@/components/Card";

function index() {
    const token = localStorage.getItem('token')
    const [salesData, setSalesData] = useState({})
    const [trafficData, setTrafficData] = useState({})
    const config = {
        data: salesData.chartData.,
        xField: 'date',
        yField: 'value',
        colorField: 'type',
        axis: {
            y: {
                labelFormatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
            },
        },
        scale: { color: { range: ['#30BF78', '#F4664A', '#FAAD14'] } },
        style: {
            lineWidth: 2,
            lineDash: (data) => {
                if (data[0].type === 'register') return [4, 4];
            },
            opacity: (data) => {
                if (data[0].type !== 'register') return 0.5;
            },
        },
    };
    const asyncFetch = () => {
        fetch('https://gw.alipayobjects.com/os/bmw-prod/c48dbbb1-fccf-4a46-b68f-a3ddb4908b68.json')
            .then((response) => response.json())
            .then((json) => console.log(json))
            .catch((error) => {
                console.log('fetch data failed', error);
            });
    };
    asyncFetch()
    useEffect(() => {
        fetch('http://180.76.236.114:3006/me-api/analysis?time_range=month', {
            headers: {
                'Authorization': 'Bearer ' + token
            }
        }).then(res => res.json())
            .then(res => {
                console.log(res.data)
                setSalesData(res.data.salesData)
                setTrafficData(res.data.trafficData)
            })
    }, [])

    return (
        <>
            <div className='flex flex-col gap-[24px] relative pb-[80px] '>
                <div className="w-full text-center h-[128px] bg-white">
                    <h2
                        className="text-[40px] h-[48px] leading-[48px] mt-[56px]"
                        style={{ color: "#000000" }}
                    >
                        店铺营销报表
                    </h2>
                </div>
                <Card>
                    <Line {...salesData} />
                </Card>
            </div>
        </>
    )
}
export default index